<template>
  <n-layout-header class="h-14">
    <div class="flex">
      <div class="w-1/2 h-14 flex items-center">
        <div class="ml-3 mr-1 flex items-center cursor-pointer" @click="reload">
          <n-icon :component="RefreshOutline" :size="24"></n-icon>
        </div>
        <n-breadcrumb v-if="$route.matched[1]?.children.length" separator="/">
          <n-breadcrumb-item
            v-for="item in $route.matched.slice(1)"
            :key="item.name"
          >
            <n-dropdown
              :options="
                item.children
                  .map((item) => {
                    return {
                      label: item.meta?.label,
                      key: item.children?.length
                        ? item.children[0].name
                        : item.name,
                    };
                  })
                  .filter((f) => f)
              "
              :on-select="(name: string) => $router.push({ name })"
            >
              <div class="trigger">{{ item.meta.label }}</div></n-dropdown
            >
          </n-breadcrumb-item>
        </n-breadcrumb>
      </div>
      <n-dropdown class="mr-3" :options="userOptions" :on-select="handleSelect">
        <div
          class="h-14 flex items-center justify-end"
          style="margin-left: auto"
        >
          <n-icon class="mr-1" size="30" color="#18a058">
            <PersonCircleOutline />
          </n-icon>
          <div class="mr-1">
            {{ username }}
          </div>
          <n-icon size="15" color="#000000" class="mr-5">
            <ChevronDown />
          </n-icon>
        </div>
      </n-dropdown>
    </div>
  </n-layout-header>
</template>

<script setup lang="ts">
import { reactive, onMounted, PropType, ref } from "vue";

/**
 *
 */
import { NGradientText } from "naive-ui";
/**
 * 本地数据ChevronDown
 */
import StorageService from "@/utils/dataStore";
/**
 *
 */
import { renderIcon } from "@/utils/index";
/**
 *
 */
import { LOGIN_PAGE } from "@/common/constants";
/**
 * 图标
 */
import {
  ChevronDown,
  LogOutOutline,
  PersonCircleOutline,
  Pencil,
  RefreshOutline,
} from "@vicons/ionicons5";
/**
 * UI组件
 */
import { NIcon } from "naive-ui";
/**
 *
 */
const props = defineProps({
  reload: {
    type: Function as PropType<() => void>,
    required: true,
  },
});

/**
 *
 */
const controller = reactive({
  isDefault: false,
  show: false,
});

/**
 * 名称
 */
const username = ref("");
/**
 * 生命周期
 */
onMounted(() => {
  /**
   * 展示数据
   */
  username.value = StorageService.localData.userName;
});
/**
 *
 */
const userOptions = [
  {
    label: "修改密码",
    key: "password",
    icon: renderIcon(Pencil),
  },
  {
    label: "退出登录",
    key: "logout",
    icon: renderIcon(LogOutOutline),
  },
];

/**
 *
 * @param k
 */
function handleSelect(key: string) {
  switch (key) {
    case "password":
      controller.show = true;
      break;
    case "logout":
      //清空本地存储
      StorageService.clearLocalStorage();
      //清空会话存储
      StorageService.clearSessionStorage();
      //登录成功
      window.location.href = LOGIN_PAGE;

      break;

    default:
      break;
  }
}
</script>
